<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>暴风周边列表页</title>
		<link rel="stylesheet" type="text/css" href="css/listPage.css" />
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<link rel="shortcut icon" type="image/x-icon" href="img/3.ico" media="screen" />
	</head>

	<body>
		<div class="listPage-mainBody">
			<div class="listPage-mainBody-wrapper">
				<ul class="listPage-mainBody-wrapper-crumbs">
					<li>
						<a href="index.html">暴风商城</a>
					</li>
					<li><i class="listPage-mainBody-wrapper-crumbs_icon"></i></li>
					<li>
						<a href="#">暴风周边</a>
					</li>
				</ul>
			</div>
			<div class="listPage-mainBody-wrapper">
				<div class="listPage-mainBody-wrapper-filter">
					<div class="wrapper-filter-type">
						<span style="line-height: 50px;float: left;margin-right: 20px;">分类：</span>
						<ul class="listPage_typelist">

						</ul>
					</div>
					<div class="wrapper-filter-line"></div>
					<div class="wrapper-filter-scort">
						<span style="line-height: 50px;float: left;margin-right: 20px;">排序：</span>
						<ul class="listPage_scortlist">
							<li class="listPage_scortlist_ontime current"data-id = "1">上架时间</li>
							<li class="listPage_scortlist_sales "data-id = "2">销量</li>
							<li class="listPage_scortlist_price" data-id = "3">价格</li>
							<div style="clear: both;"></div>
						</ul>
					</div>
				</div>
			</div>
			<div class="listPage-mainBody-wrapper">
				<ul class="listPage_prolist">

				</ul>
			</div>

		</div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
			<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/alertLogin.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/header.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/addheader.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
	$("body").addHeader()
				$.get("/typelist2", function(data) {

					$(".listPage_typelist").append(`
						<li class="current">全部</li>	
						`)

					var str = ``
					data.forEach(function(item) {
						str += `
						<li  data-id="${item.id}">${item.name}</li>	
						`
					})

					$(".listPage_typelist").append(str)

				})
		//---------------		
				

				$(".listPage_typelist").on("click", "li", function() {

					$(this).addClass("current").siblings().removeClass("current")
					loadlistPage()
				})

				$(".listPage_scortlist").on("click", "li", function() {
					$(this).addClass("current").siblings().removeClass("current")
					loadlistPage()
				})
        //--------------------

                //加载商品列表
				var loadlistPage = function() {
					var typelistid = $(".listPage_typelist li.current").data("id")
                    var priceid = $(".listPage_scortlist li.current").data("id")
					$(".listPage_prolist").empty()

					$.get("/listPage2", function(data) {
						var arr = []
						if(typelistid) {
							arr = data.filter(function(item) {
								console.log(arr)
								return item.typeid === typelistid
							})
						} else if(!typelistid) {
							arr = data
						}
						
						if(priceid === 3){
							for(var i = 0; i < arr.length - 1; i++) {
								for(var j = 0; j < arr.length - 1 - i; j++) {
									if(arr[j].unitPrice > arr[j + 1].unitPrice) {
										var temp = arr[j]
										arr[j] = arr[j + 1]
										arr[j + 1] = temp
									}
								}
							}
							console.log(arr)
						}else if(priceid === 2){
							for(var i = 0; i < arr.length - 1; i++) {
								for(var j = 0; j < arr.length - 1 - i; j++) {
									if(arr[j].volume > arr[j + 1].volume) {
										var temp = arr[j]
										arr[j] = arr[j + 1]
										arr[j + 1] = temp
									}
								}
							}
						}
		                     
						var str = ``
						arr.forEach(function(item) {
							str += `
							<li>
						<a href="DetailPages.html?id=${item.id}" class="listPage_prolist_product">
							<img src="${item.img}"  class="listPage_prolist_bac"/>
							<div class="listPage_prolist_info">
								<span style="color: #e73d4d;display: block;width: 100%;height: 24px;text-align: center;line-height: 24px;">${item.unitPrice}元&nbsp;&nbsp;
								<span style="color: #999;text-decoration: line-through;">${item.oldPrice}元</span>
								</span>
								<strong class="listPage_prolist_info_pname">${item.title}</strong>
							</div>
							<div class="listPage_prolist_button">
								<span class="listPage_prolist_button_buy">立即购买</span>
							    <span class="listPage_prolist_button_like" data-id="${item.id}">
							    	<i class="listPage_prolist_button_like_icon hate"  data-id="${item.id}"></i>
							    	喜欢</span>
							</div>
							
						<i class="listPage_prolist_showlogist" style="background:url(${item.state})";>${item.stateWord}</i>
										
						</a>
					</li>
							`
						})

						$(".listPage_prolist").append(str)

					})

				}
				loadlistPage()
					var userid = $.cookie("userId")
				$(".listPage_prolist").on("click", ".listPage_prolist_button_like", function(e) {
					e.stopPropagation()
					e.preventDefault()
					var goodsid = $(this).data("id")
				
					console.log(goodsid)
                    console.log(userid)
					if($.cookie("userId")) {
						

						if($(this).children("i.listPage_prolist_button_like_icon").hasClass("hate")) {
							$(this).children("i.listPage_prolist_button_like_icon").addClass("like").removeClass("hate");
							$.post("/goodslikeadd", {
								userid: userid,
								goodsid: goodsid
							}, function(data) {
								console.log(data.msg)
							})
						} else {
							$(this).children("i.listPage_prolist_button_like_icon").addClass("hate").removeClass("like");
							$.post("/goodslikedel", {
								userid,
								goodsid
							}, function(data) {
								console.log(data.msg)
							})
						}

					} else {
						$("body").alertLogin('listPage2.html')

					}

				})
				
		        $.get("/goodslike", {
				userid: userid
			    }, function(data) {
				console.log(data)
				data.forEach(function(item2) {
					console.log(item2.id)
					$(".listPage_prolist_button_like_icon").each(function(i, item) {
						console.log($(item).data("id"))
						if($(item).data("id") === item2.id) {
							$(item).addClass("like").removeClass("hate")
						}
					})
				})
			})
				
			
				

			})
		</script>

	</body>

</html>